<template>
	<div v-loading="loading">
		<div class="title1">
			<div>
				<span class="h1">业务管理</span>
				<span class="h2">客户管理</span>
			</div>
		</div>
		<div class="dataCon">
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="时间">
					<!--<el-select v-model="value" filterable clearable multiple placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>-->
				</el-form-item>
				<el-date-picker v-model="starTime" type="date" placeholder="开始时间">
				</el-date-picker>
				<el-date-picker v-model="endTime" type="date" placeholder="结束时间">
				</el-date-picker>
				<el-form-item>
					<el-button type="primary" @click="searchLook()">查找</el-button>
				</el-form-item>
			</el-form>
			<div>
				<div class="tables">
					<div class="table-top">
						<span>小组名称</span>
						<span>团队名称</span>
						<span>姓名</span>
						<span>到访/组</span>
						<span>成交/组</span>
						<span>实际完成/万元</span>
						<span>成交转换率</span>
					</div>
					<div v-for="item in datas" class="table-body">
						<span class="table-fn">{{item.FName}}</span>
						<div class="table-right">
							<div v-for="items in item.TData" class="table-ff">
								<span class="table-right-fn">{{items.TName}}</span>
								<div class="table-right-contne">
									<div v-for="itemsr in items.THData" class="table-td">
										<span>{{itemsr.Name}}</span>
										<span>{{itemsr.CstVist}}</span>
										<span>{{itemsr.Trans}}</span>
										<span>{{itemsr.TransMoney}}</span>
										<span>{{itemsr.Percent}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import api from "../../kits/api.js"
	export default {
		name: "statistics",
		data() {
			return {
				loading:false,
				starTime: new Date(),
				endTime: new Date(),
				formInline: {},
				options: [],
				value: "",
				datas:[]

			}
		},
		created(){
		},
		mounted() {
			this.prolist()
			this.getreport()
		},
		methods: {
			//查看
			searchLook(){
				this.loading=true
				this.$axios.post(api.getreport,{
					 "ProjectS":[],
					  "SDate": this.starTime,
					  "EDate": this.endTime
				}).then((res)=>{
					if(res.data.isOK){
						this.loading = false
						this.datas = res.data.data
						setTimeout(function(){
							var table_body = document.getElementsByClassName("table-body")
							var table_fn = document.getElementsByClassName("table-fn")
							var table_ff = document.getElementsByClassName("table-ff")
							var table_right = document.getElementsByClassName("table-right-fn")
							for(var i = 0;i<table_body.length;i++){
								table_fn[i].style.lineHeight = table_body[i].offsetHeight-1+"px"
							}
							for(var k = 0;k<table_ff.length;k++){
								table_right[k].style.lineHeight = table_ff[k].offsetHeight-1+"px"
							}
						},0)
					}else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
					
				})
			},
			//获取项目集合
			prolist(){
				var me=this;
		        this.$axios.post(api.prolist, {
		            "Para": "",
		            "PageSize": 10000,
		            "PageIndex": 0,
		            "OrderbyString": ""
		        }).then(res => {
		            if (res.data.isOK) {
		            	
		                for(var i=0;i<res.data.data.Data.length;i++){
		                   this.options.push({
		                   		value:res.data.data.Data[i].ID,
								label:res.data.data.Data[i].PName,
		                   })
		                }
		            } else {
		                if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
								this.$router.push({
									path: '/login'
								})
							} else {
	
								this.$message.error(res.data.msg);
							}
		            }
		        })
			},
			//获取报表
			getreport(){
				this.loading=true
				this.$axios.post(api.getreport,{
					 "ProjectS": [
					  ],
					  "SDate": this.starTime,
					  "EDate": this.endTime
				}).then((res)=>{
					if(res.data.isOK){
						this.loading = false
						this.datas = res.data.data
						setTimeout(function(){
							var table_body = document.getElementsByClassName("table-body")
							var table_fn = document.getElementsByClassName("table-fn")
							var table_ff = document.getElementsByClassName("table-ff")
							var table_right = document.getElementsByClassName("table-right-fn")
							for(var i = 0;i<table_body.length;i++){
								table_fn[i].style.lineHeight = table_body[i].offsetHeight-1+"px"
							}
							for(var k = 0;k<table_ff.length;k++){
								table_right[k].style.lineHeight = table_ff[k].offsetHeight-1+"px"
							}
						},0)
					}else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
					
				})
			}
		}
	}
</script>

<style>
	.title1 {
		width: 100%;
		padding: 15px 0;
		text-indent: 20px;
		background: #fff;
		border-bottom: 1px solid #dddee1;
	}
	
	.title1 span {
		margin-right: 10px;
	}
	
	.title1 .h1 {
		font-size: 16px;
		font-weight: 600;
	}
	
	.title1 .h2 {
		font-size: 14px;
	}
	
	.dataCon {
		margin-top: 20px;
		padding-bottom: 150px;
	}
	
	.tables{
		overflow: hidden;
	    width: 100%;
	    max-width: 100%;
	    background-color: #fff;
	    border: 1px solid #dfe6ec;
	    font-size: 14px;
	    color: #1f2d3d;
	}
	
	.table-top{
		border-bottom: 1px solid #dfe6ec;
		height: 40px;
	    min-width: 0;
	    text-overflow: ellipsis;
	    vertical-align: middle;
	    white-space: nowrap;
	    overflow: hidden;
	    background-color: #eef1f6;
	    text-align: left;
	    line-height: 40px;
	    width: 100%;
	}
	
	.table-top span{
		display: block;
		float: left;
		width: 14.2%;
		text-align: center;
		color: #1f2d3d;
		font-weight: 600;
	}
	.table-body{
		width: 100%;
		border-bottom: 1px solid #dfe6ec;
	}
	.table-body:after{
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0
	}
	.table-td{
		height: 40px;
		line-height: 40px;
		min-width: 0;
		width: 100%;
		border-bottom: 1px solid #dfe6ec;
		box-sizing: border-box;
	}
	.table-td:after{
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0
	}
	.table-td span{
		width: 20%;
		float: left;
		text-align: center;
		display: block;
		
	}
	.table-fn{
		width: 14.2%;
		float: left;
		text-align: center;
		border-right: 1px solid #dfe6ec;
		box-sizing: border-box;
	}
	
	.table-right{
		float: left;
		width: 85.8%;
	}
	.table-ff{
		width: 100%;
		/*border-bottom: 1px solid #dfe6ec;*/
	}
	.table-ff:after{
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0
	}
	.table-right-fn{
		width: 16.7%;
		display: block;
		float: left;
		text-align: center;
		border-right: 1px solid #dfe6ec;
		border-bottom: 1px solid #dfe6ec;
		box-sizing: border-box;
	}
	.table-right-contne{
		width: 83.3%;
		float: left;
	}
	.table-right>.table-ff:last-child .table-right-fn{
		border-bottom: none;
	}
	.table-right>.table-ff:last-child .table-right-contne>.table-td:last-child{
		border-bottom: none;
	}
	.tables>.table-body:last-child{
		border-bottom: none;
	}
</style>